<template>
    <div class="login-container" :class="darkMode ? 'dark-mode' : 'light-mode'">
        <!-- 背景装饰 -->
        <div class="bg-decoration"></div>

        <!-- 登录卡片 -->
        <div class="login-card">
            <!-- 登录标题 -->
            <h2 class="login-title">验证码登录</h2>

            <!-- 登录表单 -->
            <div class="login-form">
                <!-- 邮箱输入 -->
                <div class="reg-form-item">
                    <div class="input-wrapper">
                        <i class="fa fa-envelope"></i>
                        <input type="email" placeholder="请输入邮箱" class="holder-class" v-model="user.email" />
                    </div>
                    <div class="line"></div>
                </div>

                <!-- 验证码输入 -->
                <div class="reg-form-item">
                    <div class="input-wrapper">
                        <i class="fa fa-shield"></i>
                        <input type="text" placeholder="请输入验证码" class="holder-class" v-model="user.code" />
                        <button class="get-code-btn" :class="{ disabled: countdown > 0 }" 
                                @click="getVerificationCode" :disabled="countdown > 0">
                            {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                        </button>
                    </div>
                    <div class="line"></div>
                </div>

                <!-- 登录按钮 -->
                <div class="reg-form-item">
                    <button class="reg-btn" :class="{ disabled: !isFormValid }"
                            :style="{ opacity: isFormValid ? 1 : 0.6 }" @click="handleLogin" :disabled="!isFormValid">
                        登 录
                    </button>
                </div>

                <!-- 其他登录选项 -->
                <div class="login-options">
                    <span class="option" @click="navigateToPasswordLogin">密码登录</span>
                    <span class="divider"></span>
                    <span class="option" @click="navigateToRegister">注册</span>
                </div>

                <!-- 社交登录 -->
                <div class="social-login">
                    <span class="social-title">其他方式登录</span>
                    <div class="social-icons">
                        <div class="social-icon" @click="loginWithWeixin">
                            <i class="fa fa-weixin"></i>
                        </div>
                        <div class="social-icon" @click="loginWithQQ">
                            <i class="fa fa-qq"></i>
                        </div>
                        <div class="social-icon" @click="loginWithWeibo">
                            <i class="fa fa-weibo"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getemailcode,
    iscode
} from '@/apis/user'
export default {
    data() {
        return {
            darkMode: false,
            countdown: 0,
            timer: null,
            user: {
                email: '',
                code: '' // 保持与模板中v-model一致
            }
        };
    },
    computed: {
        isFormValid() {
            // 验证邮箱格式和验证码是否填写
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            // 确保user.code存在且长度符合要求
            return emailRegex.test(this.user.email) && this.user.code && this.user.code.trim().length >= 4;
        }
    },
    methods: {
        togglePasswordVisibility() {
            // 保持与原代码一致的方法结构
        },
        getVerificationCode() {
            // 验证邮箱格式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(this.user.email)) {
                this.$toast.show('请输入有效的邮箱地址');
                return;
            }
            getemailcode(this.user.email).then(res => {
                console.log(res)
            })
            this.startCountdown();
        },
        startCountdown() {
            this.countdown = 60;
            this.timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            }, 1000);
        },
        handleLogin() {
            if (!this.isFormValid) return;
            
            // 直接传递参数对象，不使用params包装
            iscode({
                email: this.user.email,
                code: this.user.code
            }).then(res => {
                console.log(res);
                if (res.code === 0) { // 根据后端返回的成功状态码判断
                    // 登录成功
                    localStorage.setItem('token', res.data); // 保存token
                    this.$router.push('/');
                    if (this.$toast) {
                        this.$toast.show('登录成功');
                    }
                } else {
                    // 登录失败
                    if (this.$toast) {
                        this.$toast.show(res.msg || '登录失败，请重试');
                    }
                }
            }).catch(error => {
                console.error('登录错误:', error);
                if (this.$toast) {
                    this.$toast.show('登录异常，请稍后重试');
                }
            });
        },
        navigateToPasswordLogin() {
            // 跳转到密码登录页面
            this.$router.push('/login');
        },
        navigateToRegister() {
            // 跳转到注册页面
            this.$router.push('/reg');
        },
        loginWithWeixin() {
            // 微信登录逻辑
        },
        loginWithQQ() {
            // QQ登录逻辑
        },
        loginWithWeibo() {
            // 微博登录逻辑
        }
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
};
</script>
<style scoped>
    /* 保持与原代码一致的基础样式 */
    .login-container {
        position: relative;
        padding: 0;
        margin: 0;
        height: 100%;
        overflow: hidden;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .login-card {
        background: white;
        border-radius: 15px;
        padding: 30px;
        width: 100%;
        max-width: 400px;
      
    }

    .login-title {
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: bold;
    }

    .reg-form-item {
        margin-bottom: 20px;
    }

    .input-wrapper {
        display: flex;
        align-items: center;
        position: relative;
    }

    .input-wrapper i {
        margin-right: 10px;
        color: #888;
    }

    .input-wrapper input {
        flex: 1;
        padding: 12px 0;
        border: none;
        outline: none;
        background: transparent;
    }

    .line {
        height: 1px;
        background: #eee;
        margin-top: 5px;
    }

    .get-code-btn {
        position: absolute;
        right: 0;
        background: none;
        border: none;
        color: #4b6cb7;
        font-size: 14px;
        cursor: pointer;
        outline: none;
    }

    .get-code-btn.disabled {
        color: #aaa;
        cursor: not-allowed;
    }

    .reg-btn {
        width: 100%;
        padding: 12px;
        background:  #880000;
        color: white;
        border: none;
        border-radius: 25px;
        font-size: 16px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .reg-btn.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .login-options {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }

    .option {
        color: #888;
        cursor: pointer;
        font-size: 14px;
    }

    .divider {
        width: 1px;
        height: 14px;
        background: #ddd;
        margin: 0 15px;
    }

    .social-login {
        text-align: center;
        margin-top: 30px;
    }

    .social-title {
        color: #888;
        font-size: 14px;
        margin-bottom: 15px;
        display: block;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .social-icon:hover {
        background: #e8e8e8;
    }

    .social-icon i {
        font-size: 20px;
        color: #555;
    }
</style>    